<template>
  <div class="home-container">
    <van-nav-bar>
      <div class="search-box" slot="title" @click="$router.push('/search')">
        <div class="search-text">
          <i class="iconfont iconsousuo"></i>
          <span>搜索</span>
        </div>
      </div>
    </van-nav-bar>

    <van-tabs v-model="activeIndex">
      <!-- //滑动tab导航栏 -->
      <van-tab
        class="add"
        v-for="(Channel, index) in Channels"
        :title="Channel.name"
        :key="index"
      >
        <!-- 文章列表抽离 -->
        <articles :Channel="Channel"></articles>
        <!-- 文章列表抽离 -->
      </van-tab>
      <!-- 面包屑 按钮-->
      <template slot="nav-right">
        <div class="zindex"></div>
        <van-icon name="wap-nav" @click="show = true" />
      </template>
    </van-tabs>

    <!-- 面包屑弹出层   频道-->
    <van-popup
      closeable
      close-icon="cross"
      close-icon-position="top-left"
      v-model="show"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <!-- 面包屑弹出层  抽离 -->
      <!-- popupshow  子组件中传递过来的数据-->
      <!-- dellChannel  子组件中传递过来的事件和数据  删除-->

      <article-edit
        @dellChannel="dellChannel"
        @popupshow="popupshow"
        :activeIndex="activeIndex"
        :myChannels="Channels"
      ></article-edit>
      <!-- 面包屑弹出层  抽离 -->
    </van-popup>
    <!-- 面包屑弹出层 -->
  </div>
</template>

<script>
import { channelsApi, articlesApi } from "@/api";

// list 组件引入
import articles from "./components/article-list.vue";
// 点击面包屑弹出的组件引入
import articleEdit from "./components/article-edit.vue";
export default {
  data() {
    return {
      //用户频道列表
      Channels: [],
      activeIndex: 0,

      // 弹出层
      show: false
    };
  },
  methods: {
    //子组件中传来的事件  关闭对话框
    popupshow(index) {
      this.show = false;
      this.activeIndex = index;
    },
    dellChannel(index) {
      this.activeIndex = index;
    },
    //获取用户频道列表
    async getChannel() {
      //  判断用户是否登录
      // +  如果登录  就发送请求获取 我的频道
      // +  如果未登录  获取本地缓存
      // + 如果本地缓存有值就直接取，没有就接着发送请求
      const res = await channelsApi();
      this.Channels = res.data.data.channels;
      // console.log(res.data.data.channels, 33333333);
    }
  },
  created() {
    this.getChannel();
    // this.getArticleData();
  },
  components: {
    articles,
    articleEdit
  }
};
</script>
<style scoped lang="less">
.home-container {
  width: 100vw;
  height: 100vh;
  // /deep/.van-tabs__content {
  //   position: fixed;
  //   top: 160px;
  //   bottom: 60px;
  //   overflow-y: auto;
  // }

  /deep/.van-nav-bar {
    background-color: #3296fa;
    // position: fixed;
    // top: 0;
  }
  //中间数据盒子
  /deep/ .van-tabs__content {
    height: 1200px;
    overflow-y: auto;
  }
  // .van-tab {
  //   position: fixed;
  //   top: 200px;
  // }
  .search-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 70%;
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;

    .search-text {
      color: #fff;
      font-size: 30px;
      i {
        margin-right: 15px;
      }
    }
  }
  /deep/.van-tabs__wrap--scrollable .van-tabs__nav--complete {
    align-items: center;
  }
  .zindex {
    width: 30px;
    height: 20px;
    flex-shrink: 0;
  }
  /deep/.van-icon {
    position: fixed;
    right: 0;
  }
}
</style>
